<template>
<div>
    <el-row :gutter="10">
        <el-col :xs="24" :sm="6" :md="6" :lg="9" :xl="6"></el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="9" :xl="12">
            <div class="login">
                <h2>企业登陆</h2>
                <el-form
                :label-width="'100px'"
                :label-position="'right'"
                :size="'large'"
                ref="loginForm"
                :model="loginForm"
                :rules="rules"
                @keyup.enter.native="submitForm"
                >
                    <el-form-item label="用户名"prop="username">
                        <el-input  v-model="loginForm.username" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginForm.password" placeholder="请输入密码" @keyup.enter="submitForm"/>
                    </el-form-item>
                    <el-button class="btn" @click="submitForm":loading="loading">登录</el-button>
                </el-form>
            </div>
        </el-col>
        <el-col :xs="24" :sm="6" :lg="9" :xl="6"></el-col>
    </el-row>
</div>

        
</template>
<script>
export default {
    data(){
        return {//表单数据对象
            loginForm:{
                username:'',
                password:''
            },
            loading:false,
            // 验证规则
            rules:{
                username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:3,max:20,message:'用户名长度在3到 20 个字符之间',trigger:'blur'}
                ],
                password:[
                {required:true,message:'请输入密码',trigger:'blur'},
                {min:6,message:'密码长度不能少于6个字符',trigger:'blur'}
            ]
        }
    }
},
methods:{
    submitForm(){
        this.$refs.loginForm.validate(valid =>{ //触发所有表单项的验证
            if(valid){//验证通过
                this.loading=true;
                this.login()
            }else{
                 this.$message.error('请填写正确的用户名和密码!');
                 return false;
                }
            })
        },
        login(){
            setTimeout(()=>{
                this.$message.success('登录成功!');
                this.loading=false;
                this.$router.push('/')
            },1000);
        }
    }
}
</script>
<style scoped>
.login{
    width: 90%;
    padding: 100px 30px;
    box-shadow: 0 0 10px #999;
    border-radius: 10px;
    margin:50px auto ;
}
.login h2 {
    text-align:center;
    font-size: 30px;
    margin: 10px 0px;
}
.login .el-input {
    margin: 10px 0px;
}
button.el-button {
    width: 100% !important;
    height:50px;
    background-color:#000;
    color:#fff;
    margin: 20px 0px;
}
#login .el-form-item--large .el-form-item__label {
    height:55px !important;
    line-height:55px !important;
    }
</style>